<template>
  <div>
    <hsa-adaptive-container>
      <hsa-adaptive-pane>
        <hsa-title-pane>
          <hsa-title-pane-item title="查询条件">
            <t-query-condition
              :opts="opts"
              @submit="conditionEnter"
              @handleEvent="handleEvent"
              isExpansion
            />
          </hsa-title-pane-item>
        </hsa-title-pane>
      </hsa-adaptive-pane>
      <hsa-adaptive-pane autoHeight>
        <hsa-title-pane>
          <hsa-title-pane-item title="报表信息">
            <template #toolbar>
              <div class="right-box">
                <el-button type="primary">新建</el-button>
                <div class="change-box">
                  <span
                    :class="{ active: state.active == 1 }"
                    @click="changeType(1)"
                    >平铺</span
                  >
                  <span
                    :class="{ active: state.active == 2 }"
                    @click="changeType(2)"
                    >文件夹</span
                  >
                </div>
              </div>
            </template>
            <div v-if="state.active == 1">
              <div class="list-main">
                <div class="list-item" v-for="(it,i) in tableData" :key="i">
                  <div class="item-header">
                    <div>{{ it.pzmc || '' }}</div>
                    <div>
                      <span>{{ it.td || '' }}</span>
                      <span>{{ it.crte || '' }}</span>
                    </div>
                  </div>
                  <div class="item-footer">
                    <div @click="shareHandle(it.id)">分享</div>
                    <div>编辑</div>
                    <div>删除</div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="list-box" v-for="(it,i) in tableData" :key="i">
                <div class="list-title">
                  <img src="./images/fileBox.png" alt="" srcset="" />
                  <div>{{ it.sourceName || '' }}</div>
                </div>
                <div class="list-main">
                  <div class="list-item" v-for="(its,ix) in it.children" :key="ix">
                    <div class="item-header">
                      <div>{{ its.pzmc || '' }}</div>
                      <!-- <div>
                        <div>行 XX字段</div>
                        <div>列 XX字段</div>
                      </div> -->
                      <div>
                        <span>{{ its.td || '' }}</span>
                        <span>{{ its.crte || '' }}</span>
                      </div>
                    </div>
                    <div class="item-footer">
                      <div @click="shareHandle(it.id)">分享</div>
                      <div>编辑</div>
                      <div>删除</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pagination-box">
              <el-pagination
                v-model:current-page="paginationFrom.pageNumber"
                v-model:page-size="paginationFrom.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="paginationFrom.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </hsa-title-pane-item>
        </hsa-title-pane>
      </hsa-adaptive-pane>
    </hsa-adaptive-container>
    <fetch-config-share ref="myShare" @successHand="getData" />
  </div>
</template>
<script setup lang="ts">
import fetchConfigShare from "./model/fetch-config-share.vue";
// import hsaAdaptiveContainer from '@/components/hsa/adaptive/container.vue'
// import hsaAdaptivePane from '@/components/hsa/adaptive/pane.vue'
// import HasTitle from "@/components/hsa/title-box.vue";
import { onMounted, computed, reactive, toRefs, ref } from "vue";
import apiAxios from "@/api/SelfFetch/fetch-config-manage"
import { PAth } from "@/api/SelfFetch/query"

const paginationFrom = {
  pageNumber: 1,
  pageSize: 10,
  total: 0
}
const tableData = ref([]);
const changeType = (num: number) => {
  state.active = num
  state.queryData.userName = undefined
  paginationFrom.pageNumber = 1;
  getData();
}
const handleSizeChange = (val: number) => {
  paginationFrom.pageNumber = 1;
  paginationFrom.pageSize = val;
}
const handleCurrentChange = (val: number) => {
  paginationFrom.pageNumber = val;

}
const myShare = ref(null);
const queryFrom = ref(PAth);
console.log(queryFrom, 'queryFrom');

const shareHandle = (val: any) => {
  myShare.value.open(val);
};

const edit = (val: any) => {
  console.log("edit", val);
};
const del = (val: any) => {
  console.log("nullify", val);
};
let state = reactive({
  active: 1,
  queryData: {
    userName: undefined
  },
  listTypeInfo: {
    sexList: [
      {
        label: "是",
        key: "1",
      },
      {
        label: "否",
        key: "2",
      },
    ],
  },
});
const opts = computed(() => {
  return {
    userName: {
      label: "配置名称",
      comp: "el-input",
    },
  };
});
// 最终参数获取
const getQueryData = computed(() => {
  const { userName } = toRefs(state.queryData);
  return {
    userName: userName.value,
  };
});
onMounted(() => {
  getData();
});
const getData = async () => {
  let res;
  let pageObj = JSON.parse(JSON.stringify(paginationFrom));
  delete pageObj.total;
  let obj = {
    ...getQueryData.value,
    ...pageObj
  };
  if (state.active === 1) {
    console.log("获取数据", getQueryData.value);
    res = await apiAxios.getQuerypp(obj);
  } else {
    res = await apiAxios.getQuerywjj(obj);
  }
  console.log("获取列表数据", res);
  // console.log('获取列表数据', res)
  if (res) {
    paginationFrom.total = res.total;
    if(state.active == 2) {
      let arr = []
      for (const key in res) {
        let name = ''
        switch (key) {
          case 'fxgwd':
            name = '分享给我的'
            break;
          case 'wcjd':
            name = '我创建的'
            break;
          case 'wtdd':
            name = '我团队创建的'
            break;
        }
        let obj = {
          sourceName: name,
          children: res[key],
        }
        arr.push(obj)

      }
      tableData.value = arr;
    }else{
      tableData.value = res.result;
    }
    // table.value.data = res.data.records;
    // table.value.total = res.data.total;
  }
};
// 查询条件change事件
const handleEvent = (type, val) => {
  // console.log(111, type, val)
  switch (type) {
    case "date":
      console.log("获取event==date的数据", val);
      break;
  }
};
// 点击查询按钮
const conditionEnter = (data: any) => {
  console.log(1122, data);
  state.queryData = data;
  console.log("最终参数", getQueryData.value);
  getData();
};
</script>

<style lang="scss" scoped>
.right-box {
  display: flex;
  align-items: center;
  .change-box {
    margin-left: 30px;
    span {
      display: inline-block;
      padding: 4px 15px;
      cursor: pointer;
      border: 1px solid #ccc;
      box-sizing: border-box;
      transform: skew(-20deg);
      &.active {
        background-color: #d7d7d7;
      }
    }
  }
}
$rowNum: 3;
.list-box {
  width: 100%;
  margin-bottom: 30px;
  .list-title {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
    img {
      width: 34px;
      height: 28px;
      margin-right: 10px;
      object-fit: contain;
    }
  }
}
.list-main {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding-left: 44px;
  box-sizing: border-box;
  .list-item {
    width: calc((100% - calc(20px * ($rowNum - 1))) / $rowNum);
    border: 1px solid #ccc;
    box-sizing: border-box;
    .item-header {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      > div {
        &:not(:first-child) {
          margin-top: 20px;
          padding-left: 20px;
          box-sizing: border-box;
        }
        &:first-child {
          font-size: 20px;
          font-weight: bold;
        }
        &:last-child {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .item-footer {
      width: 100%;
      display: flex;
      > div {
        width: calc(100% / 3);
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        border: 1px solid #ccc;
        box-sizing: border-box;
      }
    }
  }
}
.pagination-box{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
</style>
